<template>
  <el-dialog
    v-model="state.dialogFormVisible"
    title="账号信息"
    custom-class="dialog-min-width"
  >
    <el-form ref="formRef" :model="formEdit" label-width="120px">
      <el-row>
        <el-col :lg="12" :md="12" :sm="24" :xs="24">
          <el-form-item label="姓名">
            <el-input v-model="formEdit.name">
              <template #suffix>
                <el-icon> </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="24" :md="24" :sm="24" :xs="24">
          <el-form-item label="性别">
            <el-radio-group v-model="formEdit.gender">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
              <el-radio label="2">未知</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :lg="12" :md="12" :sm="24" :xs="24">
          <el-form-item label="登录账号">
            <el-input v-model="formEdit.account">
              <template #suffix>
                <el-icon> </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="12" :sm="24" :xs="24">
          <el-form-item label="员工编号">
            <el-input v-model="formEdit.employeeNumber">
              <template #suffix>
                <el-icon> </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="12" :md="12" :sm="24" :xs="24">
          <el-form-item label="密码">
            <el-input v-model="formEdit.password1">
              <template #suffix>
                <el-icon> </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="12" :sm="24" :xs="24">
          <el-form-item label="确认密码">
            <el-input v-model="formEdit.password2">
              <template #suffix>
                <el-icon> </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="12" :md="12" :sm="24" :xs="24">
          <el-form-item label="电子邮件">
            <el-input v-model="formEdit.email">
              <template #suffix>
                <el-icon> </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="12" :sm="24" :xs="24">
          <el-form-item label="手机号">
            <el-input v-model="formEdit.mobile">
              <template #suffix>
                <el-icon> </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="12" :md="12" :sm="24" :xs="24">
          <el-form-item label="单位名称">
            <el-input v-model="formEdit.orgName">
              <template #suffix>
                <el-icon> </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="12" :sm="24" :xs="24">
          <el-form-item label="部门名称">
            <el-input v-model="formEdit.deptName">
              <template #suffix>
                <el-icon> </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="24" :md="24" :sm="24" :xs="24">
          <el-form-item label="状态">
            <el-switch v-model="formEdit.status" active-value="1" />
          </el-form-item>
        </el-col>
        <el-col :lg="24" :md="24" :sm="24" :xs="24">
          <el-form-item label="备注">
            <el-input v-model="formEdit.description" type="textarea">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineComponent, reactive, ref, watch } from "vue";

// ts 语法，有默认值版本
const props = withDefaults(
  defineProps<{
    visible: boolean;
  }>(),
  {
    visible: false,
  }
);

const emit = defineEmits<{
  (event: "on-submit", result: boolean): void;
}>();

const state = reactive({
  dialogFormVisible: false,
});

const handleSubmit = () => {
  // 处理业务逻辑，触发关闭事件
  state.dialogFormVisible = false;
  emit("on-submit", true);
};

const formEdit = ref({
  accountId: "",
  account: "",
  name: "",
  gender: 2,
  employeeNumber: "",
  orgName: "",
  orgCode: "",
  deptName: "",
  deptCode: "",
  status: "",
  email: "",
  mobile: "",
  description: "",
  password: "",
  password1: "",
  password2: "",
});

const show = (row: any) => {
  //   console.log(form);
  formEdit.value = Object.assign({}, row);
  state.dialogFormVisible = true;
};

defineExpose({
  show,
});
</script>
